<html ng-app="villageApp">
<head>
	<link rel="stylesheet" type="text/css" href="css/village.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<script src="js/angular.min.js"></script>
	<script src="js/village.js"></script>
</head>
<body ng-controller="villageCtrl">
	<div class="heroStats" ng-show="selectedHero != null">
		<div>{{selectedHero.name}}:</div>
		<div class="leftMargin">Weapon: {{selectedHero.weapon.value.name}} ({{selectedHero.weapon.value.combat}})</div>
		<div class="leftMargin">Combat: {{selectedHero.combat}}. Speed: {{selectedHero.speed}}. Traps: {{selectedHero.traps}}.</div>
		<div class="leftMargin">Open locks: {{selectedHero.openLocks}}. Evade: {{selectedHero.evade}}. Spot: {{selectedHero.spot}}.</div>
		<div class="leftMargin">Nature: {{selectedHero.nature}}. Sneak {{selectedHero.sneak}}.</div>
	</div>
	<div class="heroes">
		<div class="hero" ng-class="{defeated : hero.health == 0, selected : $parent.selectedHero.name == hero.name}" ng-repeat="hero in heroes" ng-show="heroes.length != 0" ng-click="$parent.selectedHero = hero">
			<div class="info">
				<div>{{hero.name}}</div>
				<div>Location: {{hero.location.name}}</div>
				<div>Health: {{hero.health | number : 2}} / {{hero.maxHealth}}</div>
				<div>Energy: {{hero.energy | number : 2}}</div>
				<div>Copper: {{hero.copper}}</div>
				<ul>Items:
					<li ng-repeat="(name, count) in hero.items">{{name}} {{count}}</li>
				</ul>
			</div>
			<div class="events">Events:
				<div class="event" ng-repeat="heroEvent in hero.heroEvents track by $index">{{heroEvent}}</div>
			</div>
		</div>
	</div>
</body>
</html>